<template>
  <div id="app">
    <el-select v-model="value" placeholder="请选择" @change="drawChart()">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div
      id="myChart"
      style="width: 900px; height: 500px; margin: 30px 300px"
    ></div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import XLSX from "xlsx";
import "echarts/map/js/china.js";
import transformSheets from "../scripts/read_xlsx.js";
export default {
  name: "app",
  data() {
    return {
      city: [],
      confirmed: {},
      date: [],
      options: [],
      value: "",
    };
  },
  methods: {
    drawChart() {
      this.chartLine = echarts.init(document.getElementById("myChart"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },
        legend: {
          //设置区分（哪条线属于什么）
          data: ["省份累计确诊人数"],
        },
        color: ["#1f307b", "#1f307b"], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          boundaryGap: false, //坐标轴两边不留白
          data: this.date,
          // name: 'DATE',           //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#1f307b",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          // axisLine: {             //坐标轴轴线相关设置。
          //     lineStyle: {
          //         color: '#000000',
          //     }
          // }
        },
        yAxis: {
          // name: '省份累计确诊人数',
          nameTextStyle: {
            color: "#000000",
            fontSize: 16,
            padding: [0, 0, 10, 0],
          },
          // axisLine: {
          //     lineStyle: {
          //         color: '#000000',
          //     }
          // },
          type: "value",
        },
        dataZoom: [
          {
            startValue: "20-1-22",
          },
          {
            type: "inside",
          },
        ],
        series: [
          {
            name: "省份累计确诊人数",
            data: this.confirmed[this.value],
            type: "line",
            lineStyle: {
              normal: {
                color: "#1f307b",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    },
    getData() {
      axios
        .get("../../static/data/time_series_covid19_confirmed_china.xlsx", {
          responseType: "arraybuffer",
        })
        .then((res) => {
          var data = new Uint8Array(res.data);
          var wb = XLSX.read(data, { type: "array" });
          var sheet1 = wb.Sheets;
          // console.log(sheet1)
          var content = transformSheets(sheet1);
          delete content[0];
          // console.log(content)
          var i = 1;
          for (; i < content.length - 1; i++) {
            var op = new Object();
            // var confirm = new Object()
            this.city[i - 1] = content[i][0];
            op.value = i;
            op.label = this.city[i - 1];
            this.options.push(op);
            content[i].splice(0, 2);
            // console.log(content)
            this.confirmed[i] = content[i];
          }
          content[i].splice(0, 2);
          this.date = content[i];
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style>
</style>